<template>
  <span>{{animatedNumber}}</span>
</template>

<script>
import { TweenMax } from "gsap/TweenMax";
import { decimalTotal, millesimal } from "@/utils/decimal";
export default {
  name: "AnimatedNumber",
  props: {
    number: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      propNumber: 0
    };
  },
  computed: {
    animatedNumber: function() {
      TweenMax.to(this.$data, 0.5, { propNumber: this.number });
      return millesimal(this.propNumber.toFixed(decimalTotal(this.number)));
    }
  }
};
</script>
